<template>
  <div class="">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="资产编号" prop="assetNo">
        <el-input
          v-model="queryParams.assetNo"
          placeholder="请输入资产编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="资产状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择资产状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusArr"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="small"
          @click="resetQuery"
        >重置</el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
        >新增</el-button>
        <el-button
          icon="el-icon-upload2"
          type="warning"
          plain
          @click="handleUploadd"
        >批量导入</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" border :data="list">
      <el-table-column
        key="assetNo"
        label="资产编号"
        align="center"
        prop="assetNo"
      />
      <el-table-column
        v-for="item in dynamicColumns2"
        :key="item.key"
        :label="item.label"
        align="center"
        :prop="item.key"
        min-width="100"
      >
        <template slot-scope="scope">
          <div v-for="(tig, tindex) in scope.row.ctrlInfo" :key="tindex">
            <span v-if="item.key === tig.key">{{ tig.val }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in dynamicColumns1"
        :key="item.key"
        :label="item.label"
        align="center"
        :prop="item.key"
        min-width="100"
      >
        <template slot-scope="scope">
          <div v-for="(tig, tindex) in scope.row.assetInfo" :key="tindex">
            <span v-if="item.key === tig.key">{{ tig.val }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        key="statusLabel"
        label="资产状态"
        align="center"
        prop="statusLabel"
      />
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon=""
            class="delcolor"
            @click="handleDel(scope.row)"
          >
            删除
          </el-button>
          <el-button
            size="small"
            type="text"
            icon=""
            @click="handleEdit(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0 && !ctrlId"
      :total="total"
      :page-sizes="[20, 40, 60, 80]"
      :page.sync="queryParams.page.current"
      :limit.sync="queryParams.page.size"
      @pagination="getListpagination"
    />
    <popCon
      :id="chosid"
      ref="popCon"
      :visible.sync="show"
      :obj-target="objTarget"
      @close="close"
    />
    <uploadCon
      :type="'catalogue'"
      :visible.sync="uploadshow"
      @close="uploadclose"
    />
  </div>
</template>

<script>
// 图片上传组件
import pagination from '@/components/Pagination'
import popCon from './components/addC.vue'
import uploadCon from './components/upload.vue'
import { assetsList, assetsArr, deleteAssets } from '@/api/books'
import { assetsTemplate, formTemplate } from './components/assetsTemplate'
import { mergeObjects } from '@/utils/index'
export default {
  name: 'Bookscatalogue',
  components: {
    pagination,
    popCon,
    uploadCon
  },
  data() {
    const assetsTemplateData = assetsTemplate
    const formTemplateData = formTemplate
    return {
      assetsTemplateData: assetsTemplateData,
      formTemplateData: formTemplateData,
      queryParams: {
        assetNo: '',
        status: '',
        // tenant: this.$store.state.user.tenant,
        page: {
          searchCount: true, // 是否显示搜索数量
          current: 1, // 当前页
          size: 20
        }
      },
      loading: false,
      list: [],
      total: 0,
      show: false,
      chosid: null,
      objTarget: '',
      ctrlId: '',
      ctrlNo: '',
      dynamicColumns1: [],
      dynamicColumns2: [],
      statusArr: [
        {
          label: '可用',
          value: 'Usable'
        },
        {
          label: '不可用',
          value: 'Unusable'
        }
      ],
      uploadshow: false
    }
  },
  mounted() {
    this.ctrlId = this.$route.query.ctrlId
    this.ctrlNo = this.$route.query.ctrlNo
    this.handleQuery()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        assetNo: '',
        status: '',
        // tenant: this.$store.state.user.tenant,
        page: {
          searchCount: true, // 是否显示搜索数量
          current: 1, // 当前页
          size: 20
        }
      }
      this.handleQuery()
    },
    /** 查询菜单列表 */
    getList(falge) {
      this.loading = true
      let requestWay
      let prams = {}
      this.queryParams.page.searchCount = falge
      if (this.ctrlId) {
        requestWay = assetsArr
        prams = this.ctrlId
      } else {
        requestWay = assetsList
        prams = {
          ...this.queryParams
        }
      }
      requestWay(prams).then((res) => {
        this.loading = false
        if (res.success) {
          if (this.ctrlId) {
            this.list = res?.data ?? []
          } else {
            this.list = res?.data ?? []
            if (falge || falge === undefined) {
              this.total = res?.page?.total ?? 0
            }
          }
          // if (this.list.length > 0 && Array.isArray(this.list[0].assetInfo)) {
          // let arr = mergeObjects(this.list[0].assetInfo);
          this.generateColumns(this.assetsTemplateData, 1)
          // }
          // if (this.list.length > 0 && Array.isArray(this.list[0].ctrlInfo)) {
          // let arr = mergeObjects(this.list[0].ctrlInfo);
          this.generateColumns(this.formTemplateData, 2)
          // }
        }
      })
    },
    getListpagination() {
      this.getList(false)
    },
    generateColumns(target, falge) {
      this[`dynamicColumns${falge}`] = []
      target.map((item) => {
        const obj = {
          label: item.label,
          key: item.prop
        }
        this[`dynamicColumns${falge}`].push(obj)
      })
    },
    handleAdd() {
      this.show = true
      this.chosid = null
      this.$refs.popCon.giveCtrl(this.ctrlId, this.ctrlNo)
    },
    handleUploadd() {
      this.uploadshow = true
    },
    uploadclose(status) {
      this.uploadshow = false
      setTimeout(() => {
        if (status) {
          this.handleQuery()
        }
      }, 200)
    },
    close(status) {
      this.show = false
      this.chosid = null
      setTimeout(() => {
        if (status) {
          this.handleQuery()
        }
      }, 200)
    },
    handleDel(row) {
      const text = '确定删除该资产信息?'
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.requestDel(row.assetId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    requestDel(assetId) {
      deleteAssets(assetId)
        .then((res) => {
          if (res.success) {
            this.handleQuery()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
        .catch((err) => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        })
    },
    handleEdit(row) {
      this.show = true
      this.chosid = row.assetId
      this.objTarget = JSON.stringify(row)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
